<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>

<body>
    <!-- 页面内容 -->
    <h2>自定义指令</h2>

    <component id="root">
        <button @click="n++">点我n+1</button>
        <input type="text" v-fbind:value="n">
        <div>{{n}}</div>
    </component>
</body>

<script src="../script/vue.js"></script>

<script>
    Vue.config.devtools = true;

    let vue = new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            fbind: {
                //指令与元素成功绑定时引用
                bind(element, binding) {
                    element.value = binding.value; // 指令绑定的值  100
                },
                //    指令所在元素被插入页面时调用
                inserted(element, binding) {
                    element.focus();
                },
                //  指令所在元素被更新时调用
                update(element, binding) {
                    element.value = binding.value;
                },

            }
        }
    })
</script>

</html>